<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物详情页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #main {
        width: 100vw;
        height: 100vh;
    }

    img {
        width: 150px;
    }

    ul {
        list-style: none;
        float: left;
        margin: 50px 50px;
    }

    #click {
        cursor: pointer;
    }

    .show {
        position: absolute;
        border: 4px dashed pink;
        border-radius: 5px;
        /* background-color: lavenderblush; */
        width: 25vw;
        height: 40vh;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: -10px -10px 120px pink;
    }
    .show img{
        margin:20px;
    }
    .show span{
        margin-left: 20px;
    }
    .x {
        position: absolute;
        right: 0;
        width: 20px;
        border: 1px solid pink;
        background-color: pink;
        color: white;
        font-size: 1em;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<body>
    <div id="main">
        <div class="zs">
            <ul v-for="(key,index) in msg">
                <div v-for="(val,key) in key">
                    <li v-if="key == 'src'"><img :src="val"></li>
                </div>
                <li id="click" v-on:click="click(index)">{{index}}</li>
            </ul>
        </div>
        <!-- index为键，val为值 -->
        <div class="show" v-for="(val,index) in msg" :style="show">
            <button class="x" v-on:click="x">×</button>
            <!-- 当你的键值和你点击的值相等，进入下一层循环(value为值，key为键) -->
            <div v-if="index ==name" v-for="(value,key) in val">
                <!-- 如果键src等于值'src' 则显示图片 -->
                <img v-if="key=='src'" :src="value">
                <span v-if="key=='introduce'">{{value}}</span>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#main',
        data: {
            msg: {
                '布丁狗': { src: './布丁狗.jpg', introduce: '布丁狗是一只黄色的小狗，因为爱吃布丁，长得也像布丁，所以被称为布丁狗' },
                '玉桂狗': { src: './玉桂狗.jpg', introduce: '玉桂狗是一只白色的小狗，因为尾巴长得像个肉桂卷，所以被称为玉桂狗,xxxxxxxxxxxxxxx' }
            },
            name: '',
            show: 'visibility: hidden;'
        },
        methods: {
            click: function (index) {
                this.name = index
                this.show = 'visibility: visible;'
            },
            x:function(){
                this.show = 'visibility: hidden;'
            }
        }
    })
</script>

</html>